<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image
            round
            class="avatar"
            :src="UserInfoList.photo"
            @click="imageClickFn"
          />
          <!--input框用来上传文件 type=file -->
          <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            @change="onFileChange"
          />
        </template>
      </van-cell>
      <van-cell
        title="名称"
        is-link
        :value="UserInfoList.name"
        @click="nameClickFn"
      />
      <van-cell
        title="生日"
        is-link
        :value="UserInfoList.birthday"
        @click="birthdayClickFn"
      />
    </van-cell-group>

    <!-- 姓名修改的弹窗 -->
    <van-dialog
      v-model="show"
      title="标题"
      show-cancel-button
      :before-close="beforeCloseFn"
    >
      <input type="text" v-fofo v-model="inputUserName" />
    </van-dialog>
    <!-- 时间选择器 -->
    <!-- 组件搭配使用 -->
    <van-popup
      v-model="popupShow"
      round
      position="bottom"
      :style="{ height: '45%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="datetimePickerCancelFn"
        @confirm="confirmFn"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  userProfileAPI,
  updateUserPhotoAPI,
  updateUserProfileAPI,
} from "@/api";
import { formatDate } from "@/utils/date.js";
import { Notify } from "vant";
import { mapMutations } from "vuex";
export default {
  name: "UserEdit",
  data() {
    return {
      UserInfoList: [], //用户信息数据
      show: false, //控制姓名修改输入框的出现和隐藏
      inputUserName: "", //修改名字-弹出框输入框绑定的值
      minDate: new Date(1920, 0, 1), //最小范围
      maxDate: new Date(), //最大范围（默认获取系统的日期（今日））
      currentDate: new Date(2021, 0, 17), //当前时间
      popupShow: false,
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    //更改vuex里的头像数据
    ...mapMutations(["SET_USERPGOTO", "SET_USERNAME"]),
    // 获取数据
    async getUserInfo() {
      const { data: res } = await userProfileAPI();
      this.UserInfoList = res.data;
      // console.log(this.UserInfoList);
    },
    //文件选择改变事件
    async onFileChange(e) {
      if (e.target.files.length === 0) return; //用户可能没有选择图片文件，阻止代码往下
      console.log(e.target.files[0]); //（用户选中的文件对象）数组其实是一个特殊对象
      // 创建FormData对象
      const theFd = new FormData();
      // .append()  formData的固定方法
      theFd.append("photo", e.target.files[0]); //请求体里加入一对参数名和值

      const { data: res } = await updateUserPhotoAPI(theFd);

      // 将头像的地址替换掉
      this.UserInfoList.photo = res.data.photo;
      //更改vuex里的头像数据
      this.SET_USERPGOTO(this.UserInfoList.photo);
    },
    // 图片点击事件
    imageClickFn() {
      this.$refs.iptFile.click(); //jS模拟标签的事件触发
    },
    // 姓名-点击事件
    nameClickFn() {
      this.show = true;
      // 绑定用户名
      this.inputUserName = this.UserInfoList.name;
    },
    //姓名-确认框关闭前的回调函数
    async beforeCloseFn(action, done) {
      if (action === "confirm") {
        // 点击的确定
        // 正则校验
        let reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,7}$/;
        if (reg.test(this.inputUserName) === true) {
          // 通过校验
          //调用接口
          const res = await updateUserProfileAPI({
            name: this.inputUserName,
          });
          console.log(res);
          // （第一种方法）刷新页面，可更新成功
          // this.getUserInfo();
          // （第二种方法）更新成功-回显到页面上
          this.UserInfoList.name = this.inputUserName;
          // 改变vuex里的用户名
          // this.SET_USERNAME(this.UserInfoList.name);
          done();
        } else {
          // 没通过校验
          // 给用户提示
          Notify({
            type: "warning",
            message: "用户名只能是1-7位的中英文数字组合",
          });
          done(false);
        }
      } else {
        // 点击的取消

        done(); //让弹窗关闭
      }
    },
    // 点击生日事件
    birthdayClickFn() {
      //弹出时间选择器
      this.popupShow = true;
      //数据和页面显示的格式是年-月-日格式的字符串
      // datetimePicker组件的格式是日期对象
      this.currentDate = new Date(this.UserInfoList.birthday); //转成日期对象
    },
    // 点击时间选择器取消事件
    datetimePickerCancelFn() {
      // 关闭时间弹出框
      this.popupShow = false;
    },
    // 点击时间选择器完成事件
    async confirmFn() {
      // 日期选择器组件里currentDate是日期对象，而后端要的是年-月-日字符串
      await updateUserProfileAPI({
        birthday: formatDate(this.currentDate), //转成YYYY-MM-DD字符串格式
      });
      // 关闭时间弹出层
      this.popupShow = false;
      // 单元格同步更新(回显)
      // this.UserInfoList.birthday = formatDate(this.currentDate);
      // 刷新页面
      this.getUserInfo();
    },
  },
};
</script>

<style lang="less" scoped>
// 头部导航栏
.van-nav-bar {
  background-color: #575b60;
}
/deep/ .van-nav-bar__title,
/deep/.van-nav-bar__arrow {
  color: #fff;
}

//
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
// 输入框居中
/deep/.van-dialog__content {
  // 1
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // 2
  text-align: center;
  input {
    padding: 0;
    outline: none;
    border: none;
    text-align: center;
  }
}
</style>